<template>
  <div class="app-container">
    <secondary @reset="reset" />
    <div class="filter-container">
      <span class="filter-title filter-item">饰品品质</span>
      <k-select
        v-model="listQuery.rarityId"
        class="filter-item babyquality"
        type="1"
        :custom-params="{
          opations: categoryData.qualityList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品外观</span>
      <k-select
        v-model="listQuery.exteriorId"
        class="filter-item babylook"
        type="1"
        :custom-params="{
          opations: categoryData.exteriorList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品分类</span>
      <k-select
        v-model="listQuery.categoryId"
        class="filter-item babycategory"
        :custom-params="{
          opations: categoryList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">饰品类别</span>
      <k-select
        v-model="listQuery.qualityId"
        class="filter-item openbox-name"
        :custom-params="{
          opations: categoryData.typeList,
          label: 'lineName',
          value: 'lineId',
        }"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">使用状态</span>
      <k-select
        v-model="listQuery.use"
        class="filter-item openbox-name"
        :select-params="[{label:'全部',value: null},{label:'使用',value: true},{label:'未使用',value: false},]"
        @handleSelectEvent="handleFilter"
      />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="饰品名称或关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!-- createRobotDialog -->
    <k-button
      class="top-btn"
      value="预警配置"
      @click.native="warningSettingDialog"
    />
    <k-button
      v-if="authorityHandle(157)"
      class="top-btn"
      value="添加饰品"
      @click.native="addBabyDialog"
    />
    <k-button
      v-if="authorityHandle(157)"
      class="top-btn"
      value="自定义饰品"
      @click.native="customBabyDialog"
    />
    <k-button
      v-if="authorityHandle(157)"
      class="top-btn"
      value="删除饰品"
      @click.native="deleteBabyDialog"
    />
    <k-button
      v-if="authorityHandle(157)"
      class="top-btn"
      value="手动刷新"
      @click.native="manualRefresh"
    />
    <k-button
      class="top-btn"
      value="强预警配置"
      @click.native="strongWarningSetting"
    />
    <k-button
      class="top-btn"
      value="自定义价格管理"
      @click.native="openCustomPriceShow"
    />
    <k-button
      class="top-btn"
      value="箱内价格预警"
      @click.native="boxPriceWarning"
    />
    <el-badge is-dot class="item" :hidden="tip.red">
      <button class="tip" @click="tipDialog">?</button>
    </el-badge>

    <!--表格相关 -->
    <el-table
      :data="babylist"
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column
        v-if="authorityHandle(157)"
        min-width="60px"
        type="selection"
        align="center"
      />
      <el-table-column width="60px" label="序号" align="center">
        <template slot-scope="scope">
          <div>
            <svg-icon
              v-show="babylist[scope.$index].warningMsg"
              icon-class="warning"
            />
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="110px" label="图标" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 110px; height: 80px"
            :src="scope.row.iconUrl"
            :preview-src-list="[scope.row.iconUrl]"
            fit="contain"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="130px" label="自定义图标长" align="center">
        <template slot-scope="scope">
          <k-image :imagevalue="scope.row.customImg"></k-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsCnName"
        min-width="200px"
        label="饰品名称"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="扎比特数据" show-overflow-tooltip align="center">
        <el-table-column
          prop="zbtMinPrice"
          label="最低价(R)"
          min-width="80"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="zbtSellNum"
          label="当前数量"
          min-width="100"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="zbtOfficialPrice"
          label="参考价(R)"
          min-width="80"
          sortable="custom"
          align="center"
        />
      </el-table-column>
      <!-- <el-table-column label="IGXE数据" show-overflow-tooltip align="center">
        <el-table-column prop="buffMinPrice" label="最低价" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="buffSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="buffOfficialPrice" label="参考价" min-width="80" sortable="custom" align="center" />
      </el-table-column> -->
      <el-table-column label="悠悠数据" show-overflow-tooltip align="center">
        <el-table-column
          prop="uuMinPrice"
          label="最低价(R)"
          min-width="80"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="uuSellNum"
          label="当前数量"
          min-width="100"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="uuOfficialPrice"
          label="参考成本(R)"
          min-width="100"
          sortable="custom"
          align="center"
        />
      </el-table-column>
      <!-- <el-table-column label="IO数据" show-overflow-tooltip align="center">
        <el-table-column prop="ioMinPrice" label="最低价" min-width="80" sortable="custom" align="center" />
        <el-table-column prop="ioSellNum" label="当前数量" min-width="100" sortable="custom" align="center" />
        <el-table-column prop="ioOfficialPrice" label="参考成本" min-width="80" sortable="custom" align="center" />
      </el-table-column> -->
      <el-table-column label="V5Item数据" show-overflow-tooltip align="center">
        <el-table-column
          prop="v5MinPrice"
          label="最低价(R)"
          min-width="80"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="v5SellNum"
          label="当前数量"
          min-width="100"
          sortable="custom"
          align="center"
        />
        <el-table-column
          prop="v5OfficialPrice"
          label="参考成本(R)"
          min-width="100"
          sortable="custom"
          align="center"
        />
      </el-table-column>
      <el-table-column
        v-if="authorityHandle(157)"
        prop="customPrice"
        min-width="100px"
        label="自定义价格(R)"
        sortable="custom"
        align="center"
      >
        <template slot-scope="scope">
          <div
            class="price-div"
            @click="
              {
                {
                  changeNum(scope.$index);
                }
              }
            "
          >
            <el-input
              v-if="editable[scope.$index]"
              v-model="scope.row.customPrice"
              v-focus
              @keyup.enter.native="upcustomPrice(scope)"
              @blur="blurInput(scope.$index)"
            />
            <span
              v-else
              :style="{
                color: scope.row.isUpdate === 2 ? '#3b425d' : '#409EFF',
              }"
              >{{ scope.row.customPrice }}</span
            >
          </div>
        </template>
      </el-table-column>

      <el-table-column
        v-else
        prop="customPrice"
        min-width="120px"
        label="自定义价格"
        sortable="custom"
        align="center"
      />

      <el-table-column
        prop="rarityName"
        min-width="100px"
        label="品质"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="exteriorName"
        min-width="100px"
        label="外观"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="categoryName"
        min-width="100px"
        label="分类"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="qualityName"
        min-width="100px"
        label="类别"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="warningMsg"
        min-width="200px"
        label="预警原因"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
   <!-- <k-button
            v-if="authorityHandle(157)"
            v-show="babylist[scope.$index].isManual===2"
            class="table-btn"
            value="修改"
            @click.native="updatecustomBabyDialog(scope.row)"
          /> -->
          <k-button
            class="table-btn"
            value="自定义图片"
            @click.native="updateImgDialog(scope.row)"
          />
          </div>
       
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
    <!-- 强预警配置 弹窗 -->
    <k-dialog
      :show-hide.sync="strongWarningShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="强预警配置"
      :show-foot="false"
      :two-btn="authorityHandle(157)"
      @click="saveStrongWarning"
    >
      <div class="warning_div">
        <el-form :model="strongWarningModel" label-width="auto">
          <el-form-item label="毛利报警百分比：" prop="goodsCnName">
            <el-input
              v-model="strongWarningModel.profitPercent"
              :readonly="!authorityHandle(157)"
              placeholder="请输入"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
            />
          </el-form-item>
          <el-form-item label="最低价增幅百分比：" prop="customPrice">
            <el-input
              v-model="strongWarningModel.increasePercentValue"
              :readonly="!authorityHandle(157)"
              onkeyup="value=value.replace(/[^0-9.]/g,'')"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>
    </k-dialog>

    <!-- 自定义价格管理 弹窗 -->
    <k-dialog
      :show-hide.sync="customPriceShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="自定义价格管理"
      :show-foot="false"
      :two-btn="authorityHandle(157)"
      @click="saveCustomPrice"
    >
      <div class="warning_div">
        <p class="customPriceText">
          当数量大于<el-input
            v-model="customSupervisePrice"
            :readonly="!authorityHandle(157)"
            onkeyup="value=value.replace(/[^0-9.]/g,'')"
          />时,<br /><br />饰品自定义价格默认等于四个价格中第二低的价格
        </p>
      </div>
    </k-dialog>

    <!-- 预警配置 弹窗 -->
    <k-dialog
      :show-hide.sync="warningSetting.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="预警配置"
      :show-foot="false"
      :two-btn="authorityHandle(157)"
      @click="saveWarningNum"
    >
      <el-radio-group
        v-model="warningType"
        fill="#3b425d"
        text-color="#ffffff"
        class="top-radio-group"
      >
        <el-radio-button label="stockwarning">库存预警</el-radio-button>
        <el-radio-button label="pricewarning">价格预警</el-radio-button>
      </el-radio-group>
      <div class="dialog-warningSetting">
        <ul v-if="warningType === 'stockwarning'">
          <li
            v-for="(
              warningStockItem, index
            ) in warningSettingModel.warningStockArray"
            :key="warningStockItem.id"
          >
            <span class="warning-title">价格范围(R)：</span>
            <el-input
              v-model="warningStockItem.minPrice"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />
            <i style="margin: 0 3px"> — </i>
            <el-input
              v-model="warningStockItem.maxPrice"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />

            <span class="warning-title-right">预警库存数量：</span>
            <el-input
              v-model="warningStockItem.num"
              :readonly="!authorityHandle(157)"
              clearable
            />
            <i
              v-if="authorityHandle(157)"
              v-show="index != 0"
              class="el-icon-remove"
              @click="removeWarningStockItem(warningStockItem.id)"
            />
            <i
              v-if="authorityHandle(157)"
              v-show="
                index === warningSettingModel.warningStockArray.length - 1
              "
              class="el-icon-circle-plus"
              @click="addWarningStockItem"
            />
          </li>
        </ul>
        <ul v-if="warningType === 'pricewarning'">
          <li
            v-for="(
              warningPriceItem, index
            ) in warningSettingModel.warningPriceArray"
            :key="warningPriceItem.id"
          >
            <span class="warning-title">价格范围(R)：</span>
            <el-input
              v-model="warningPriceItem.minPrice"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />
            <i style="margin: 0 3px"> — </i>
            <el-input
              v-model="warningPriceItem.maxPrice"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />
            <span class="warning-title-right2">百分比差距上下限：</span>
            <el-input
              v-model="warningPriceItem.lowPercent"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />
            <i style="margin: 0 3px"> — </i>
            <el-input
              v-model="warningPriceItem.upPercent"
              :readonly="!authorityHandle(157)"
              class="price-input"
            />

            <i
              v-if="authorityHandle(157)"
              v-show="index != 0"
              class="el-icon-remove"
              @click="removeWarningPriceItem(warningPriceItem.id)"
            />
            <i
              v-if="authorityHandle(157)"
              v-show="
                index === warningSettingModel.warningPriceArray.length - 1
              "
              class="el-icon-circle-plus"
              @click="addWarningPriceItem"
            />
          </li>
        </ul>
      </div>
    </k-dialog>
    <!-- 添加饰品 弹窗 -->
    <k-dialog
      :show-hide.sync="addBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加饰品"
      class="addBaby-dialog"
      :two-btn="false"
      :close-fun="handleCloseDialog"
    >
      <searchadd
        ref="ksearchadd"
        class="search-add"
        :result-list="resultList"
        @requestReslutList="requestReslutList"
        @clearReslutList="clearReslutList"
        @handleCloseDialog="handleCloseDialog"
        @saveBabyData="saveBabyData"
      />
    </k-dialog>
    <!-- 自定义饰品 弹窗 -->
    <k-dialog
      :show-hide.sync="customBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="自定义饰品"
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveManualData"
    >
      <el-form :model="customBabyInfo" label-width="auto">
        <el-form-item label="自定义饰品名称：" prop="goodsCnName">
          <el-input
            v-model="customBabyInfo.goodsCnName"
            show-word-limit
            placeholder="请输入饰品名称"
          />
        </el-form-item>
        <el-form-item label="饰品图标：" prop="iconUrl">
          <k-upload-file
            ref="upload1"
            v-model="customBabyInfo.iconUrl"
            upload-style="img"
            @successUpload="successUpload"
          />
          <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
        </el-form-item>
        <el-form-item label="自定义价格：" prop="customPrice">
          <el-input
            v-model="customBabyInfo.customPrice"
            onkeyup="value=value.replace(/[^0-9.]/g,'')"
            placeholder="请输入价格"
          />
        </el-form-item>
        <el-form-item label="品质：" prop="rarityId">
          <el-input
            v-model="customBabyInfo.rarityName"
            placeholder="请输入品质"
          />
        </el-form-item>
        <el-form-item label="外观：" prop="exteriorId">
          <el-input
            v-model="customBabyInfo.exteriorName"
            placeholder="请输入外观"
          />
        </el-form-item>
        <el-form-item label="分类：" prop="categoryId">
          <el-input
            v-model="customBabyInfo.categoryName"
            placeholder="请输入分类"
          />
        </el-form-item>
        <el-form-item label="类别：" prop="qualityId">
          <el-input
            v-model="customBabyInfo.qualityName"
            placeholder="请输入类别"
          />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 自定义图片 弹窗 -->
    <k-dialog
      :show-hide.sync="customImgBaby.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="自定义图标"
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="saveImgData"
    >
      <el-form :model="customBabyImg" label-width="auto">
        <el-form-item label="赠品图标长：">
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :http-request="upload1"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="codeValue2" :src="codeValue2" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
        </el-form-item>
        <!-- <el-form-item label="赠品图标正：" >
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :http-request="upload2"
            :before-upload="beforeAvatarUpload">
            <img v-if="codeValue3" :src="codeValue3" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
        </el-form-item> -->
        <!-- <el-form-item label="顶部图：" >
          <el-upload
            class="avatar-uploader"
            action
            :show-file-list="false"
            :http-request="upload3"
            :before-upload="beforeAvatarUpload">
            <img v-if="codeValue4" :src="codeValue4" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span style="color: #b2b2b2">只能上传jpg/png文件，且不超过2M</span>
        </el-form-item> -->
      </el-form>
    </k-dialog>

    <!-- 箱内价格预警 -->
    <k-dialog
      :show-hide.sync="priceWarning.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="箱内价格预警"
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="priceWarningBtn"
    >
    <div style="display: flex;align-items: center;">
      <span>箱内 / 平台饰品库 <</span>
      <el-input
        style="width: 100px;"
        v-model="priceWarning.warning"
        placeholder="请输入"
      />
      <span>%</span>
    </div>
   
    </k-dialog>
        <!-- 箱内价格预警 -->
    <k-dialog
      :show-hide.sync="tip.showHide"
      :modal-append-to-body="false"
      :noBtnTextShow="false"
      :append-to-body="true"
      title=""
      class="customBaby-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="tipBtn"
    >
    <div v-for="(item,index) in tip.warningList" :key="index" style="font-size: 12px;">
      <span>{{index+1}}. </span>
      <span>盲盒名称: {{item.boxName}}</span>
      <span> 内 </span>
      <span>饰品名称: {{item.goodsName}}</span>
    </div>
    </k-dialog>
  </div>
</template>

<script>
import {
  setWarningSetting,
  getWarningSetting,
  getList,
  refresh,
  getCategoryList,
  getGoodsMarketList,
  addGoods,
  getWarningNum,
  saveWarningNum,
  getWarningPrice,
  saveWarningPrice,
  saveManualData,
  deleteData,
  updateManualData,
  updateGoodsPrice,
  getSettingNum,
  setSettingNum,
  setCustomImage,
  uploadCustomImage,
  saveBoxGoodsWarning,
  getBoxGoodsWarning,
  getBoxGoodsWarningList,
  getCategoryQualityList,
  getCategoryExteriorList,
  getCategoryTypeList
} from "@/api/babylib/platformlib/listdata";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Searchadd from "@/components/KSearchAdd"; // secondary package based on el-pagination
import { browserType } from "@/utils/validate";

export default {
  components: { Pagination, Searchadd },
  dicts: ["ORNAMENT_QUALITY", "ORNAMENT_APPEARANCE", "ORNAMENT_CATEGORY"],
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      strongWarningModel: {
        profitPercent: undefined,
        increasePercentValue: undefined,
      },
      editable: [],
      // 全部数据
      resultList: [
        {
          lineId: -1,
          lineName: " ",
          lineCheck: false,
        },
      ],
      categoryList: [],
      totalRows: 0, // 分页组件--数据总条数
      babylist: [], // 表格的数据
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
          start: "",
        },
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        categoryId: undefined, // 饰品分类,
        exteriorId: undefined, // 饰品外观',
        qualityId: undefined, // 饰品类别',
        rarityId: undefined, // 饰品品质',
        key: "", // 饰品名称'
        use:'' ,// 使用状态
      },
      customBabyInfo: {
        goodsCnName: "",
        iconUrl: "",
        customPrice: undefined,
        categoryName: "", // 分类
        exteriorName: "", // 外观
        qualityName: "", // 类别
        rarityName: "", // 品质
      },
      warningSettingModel: {
        warningStockArray: [
          {
            id: undefined,
            num: undefined,
            minPrice: "",
            maxPrice: "",
          },
        ],
        warningPriceArray: [
          {
            id: undefined,
            minPrice: "",
            maxPrice: "",
            lowPercent: "",
            upPercent: "",
          },
        ],
      },
      warningType: "stockwarning",
      probility: {
        prob: "",
      },
      timeValue: "",
      conditions: {
        keyword: null,
      },
      warningSetting: {
        showHide: false,
      },
      addBaby: {
        showHide: false,
      },
      customBaby: {
        showHide: false,
        isUpdate: false,
      },
      multipleSelection: [],
      strongWarningShow: false,

      customPriceShow: false,
      customSupervisePrice: undefined,
      // 自定义图标
      customImgBaby: {
        showHide: false,
      },
      customBabyImg: {
        id: "",
        customImgUrl: "",
        smallImageUrl: "",
        customTopBarImg: "",
      },
      priceWarning:{
        showHide: false,
        warning:""
      },
      tip:{
        showHide:false,
        red:true,
        warningList:[]
      },
      categoryData:{
        qualityList:[],
        exteriorList:[],
        typeList:[]
      }
    };
  },
  computed: {
    codeValue1() {
      if (
        this.customBabyInfo.iconUrl.indexOf("http") !== -1 &&
        this.customBabyInfo.iconUrl
      )
        return;
      return this.customBabyInfo.iconUrl
        ? this.$store.state.user.imagePath + this.customBabyInfo.iconUrl
        : "";
    },
    codeValue2() {
      return this.customBabyImg.customImgUrl
    },
    codeValue3() {
      if (
        this.customBabyImg.smallImageUrl.indexOf("http") !== -1 &&
        this.customBabyImg.smallImageUrl
      )
        return;
      return this.customBabyImg.smallImageUrl
        ? this.$store.state.user.imagePath + this.customBabyImg.smallImageUrl
        : "";
    },
    codeValue4() {
      if (
        this.customBabyImg.customTopBarImg.indexOf("http") !== -1 &&
        this.customBabyImg.customTopBarImg
      )
        return;
      return this.customBabyImg.customTopBarImg
        ? this.$store.state.user.imagePath + this.customBabyImg.customTopBarImg
        : "";
    },
  },
  created() {
    this.loadData();
    this.getCategory();
    this.init();
  },
  methods: {
    init(){
      this.initCategoryQualityList()
      this.initCategoryExteriorList()
      this.initCategoryTypeList()
    },
    async initCategoryQualityList(){
      const res = await getCategoryQualityList()
      if(res.status === 200){
        this.categoryData.qualityList = res.data
      }
      
    },
    async initCategoryExteriorList(){
      const res = await getCategoryExteriorList()
      if(res.status === 200){
        this.categoryData.exteriorList = res.data
      }
    },
    async initCategoryTypeList(){
      const res = await getCategoryTypeList()
      if(res.status === 200){
        this.categoryData.typeList = res.data
      }
    },
    tipBtn(){
      this.tip.showHide=false
    },
    async tipDialog(){
      this.tip.showHide=true
      const res = await getBoxGoodsWarningList()
      if(res.status === 200){

        this.tip.warningList=res.data || []
      }
    },
    //  箱内价格预警确定按钮
    async priceWarningBtn(){
      const res = await saveBoxGoodsWarning({warning:this.priceWarning.warning})
      if(res.status === 200){
        this.priceWarning.showHide=false;
        this.$message.success("保存成功");
      }
    },
    // 箱内价格预警
    async boxPriceWarning(){
      this.priceWarning.showHide=true
      const res = await getBoxGoodsWarning()
      if(res.status === 200 && res.data){
        this.priceWarning.warning=res.data || '';
      }else{
        this.priceWarning.warning='';
      }
    },
    // 打开自定义价格弹框
    openCustomPriceShow() {
      getSettingNum().then((res) => {
        this.customSupervisePrice = res.data;
        this.customPriceShow = true;
      });
    },

    // 保存自定义价格
    saveCustomPrice() {
      setSettingNum({ num: this.customSupervisePrice }).then((res) => {
        this.$message.success("保存成功");
        this.customPriceShow = false;
      });
    },

    upcustomPrice(scope) {
      const index = scope.$index;
      this.blurInput(index);
      const price = scope.row.customPrice;
      const id = scope.row.id;
      updateGoodsPrice({ id: id, customPrice: price, readyStatus: false }).then(
        (res) => {
          if (res.data.success) {
            scope.row.isUpdate = 2;
          } else {
            const data = {
              show: true,
              type: 1,
              name: scope.row.goodsCnName,
              data: res.data,
              info: {
                id: id,
                customPrice: price,
              },
            };
            this.$store.commit("secondary/SET_SECONDARYDATA", data);
          }
        }
      );
    },

    // 重新获取
    reset() {
      this.loadData();
    },

    blurInput(index) {
      this.editable[index] = false;
      this.$set(this.editable, index, false);
    },
    changeNum(index) {
      this.editable[index] = true;
      this.$set(this.editable, index, true);
    },
    loadData() {
      getList(this.listQuery).then((res) => {
        const data = res.data;
        this.babylist = data.rows;
        this.totalRows = data.totalRows;
      });
    },
    // 获取饰品分类
    getCategory() {
      getCategoryList().then((res) => {
        const data = res.data;
        this.categoryList = data;
      });
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
    // 强预警配置
    strongWarningSetting() {
      getWarningSetting().then((res) => {
        this.strongWarningModel = res.data;
        this.strongWarningShow = true;
      });
    },
    saveStrongWarning() {
      setWarningSetting(this.strongWarningModel).then((res) => {
        this.$message.success("保存成功");
        this.strongWarningShow = false;
      });
    },
    // 手动刷新
    manualRefresh() {
      this.$confirm("确定手动爬取吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          refresh().then((res) => {
            this.$message.success("刷新程序正在后台执行，请稍后");
          });
        })
        .catch(() => {});
    },
    // 选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop;
      if (column.order === "ascending") {
        this.listQuery.direction = "asc";
      } else if (column.order === "descending") {
        this.listQuery.direction = "desc";
      }
      this.loadData();
    },
    // 请求搜索添加饰品的返回列表
    requestReslutList(value) {
      getGoodsMarketList({ key: value }).then((res) => {
        this.resultList = [];
        Object.assign(this.resultList, res.data);
        this.$log(this.resultList);
      });
    },
    // 请求搜索添加饰品的返回列表
    clearReslutList(value) {
      this.resultList = [];
    },
    // 保存 数据
    saveBabyData(value) {
      if (value.length < 1) {
        this.$message.error("请选择饰品添加！");
        return;
      }
      const obj = {};
      Object.assign(obj, { ids: value.map((item) => item.lineId) });
      addGoods(obj).then((res) => {
        this.$message.success(res.message);
        this.loadData();
      });
      this.resetBabyDialogData();
      this.addBaby.showHide = false;
    },
    getSettingData() {
      getWarningNum().then((res) => {
        if(res.data.length !=0 )this.warningSettingModel.warningStockArray =res.data;
      });
      getWarningPrice().then((res) => {
        if(res.data.length !=0 )this.warningSettingModel.warningPriceArray =res.data;
      });
    },
    // 加载预警配置
    warningSettingDialog() {
      this.getSettingData();
      this.warningSetting.showHide = true;
    },
    // 保存预警配置
    saveWarningNum() {
      if (this.warningType === "stockwarning") {
        let status = this.warningSettingModel.warningStockArray.every(i=>
           i.maxPrice&&i.minPrice&&i.num
        )
        if(!status) return this.$message.error("请输入完整!");
        saveWarningNum(this.warningSettingModel.warningStockArray).then(
          (res) => {
            this.loadData();
          }
        );
      } else {
        let status = this.warningSettingModel.warningPriceArray.every(i=>
           i.lowPercent&&i.maxPrice&&i.minPrice&&i.upPercent
        )
        if(!status) return this.$message.error("请输入完整!");
        saveWarningPrice(this.warningSettingModel.warningPriceArray).then(
          (res) => {
            this.loadData();
          }
        );
      }
      this.warningSetting.showHide = false;
    },
    saveManualData() {
      if (this.customBaby.isUpdate) {
        updateManualData(this.customBabyInfo).then((res) => {
          this.$message.success("修改成功");
          this.loadData();
        });
      } else {
        saveManualData(this.customBabyInfo).then((res) => {
          this.$message.success("添加成功");
          this.loadData();
        });
      }
      this.customBaby.isUpdate = false;
      this.customBaby.showHide = false;
    },
    addBabyDialog() {
      this.addBaby.showHide = true;
    },
    // 重置添加饰品数据
    resetBabyDialogData() {
      this.$refs.ksearchadd.checkedList = [];
      this.$refs.ksearchadd.keyword = "";
    },
    handleCloseDialog() {
      this.addBaby.showHide = false;
      this.resetBabyDialogData();
    },
    customBabyDialog() {
      this.customBaby.showHide = true;
    },
    updatecustomBabyDialog(item) {
      this.customBaby.showHide = true;
      this.customBaby.isUpdate = true;
      this.customBabyInfo.id = item.id;
      this.customBabyInfo.goodsCnName = item.goodsCnName;
      this.customBabyInfo.iconUrl = item.iconUrl;
      this.customBabyInfo.customPrice = item.customPrice;
      this.customBabyInfo.categoryName = item.categoryName;
      this.customBabyInfo.exteriorName = item.exteriorName;
      this.customBabyInfo.qualityName = item.qualityName;
      this.customBabyInfo.rarityName = item.rarityName;
    },
    // 保存自定义图片
    saveImgData() {
      setCustomImage({
        customImageUrl: this.customBabyImg.customImgUrl,
        id: this.customBabyImg.id,
        smallImageUrl: this.customBabyImg.smallImageUrl,
        customTopBarImg: this.customBabyImg.customTopBarImg,
      }).then((res) => {
        if (res.status == 200) {
          this.customImgBaby.showHide = false;
          this.loadData();
        }
      });
    },
    // 修改自定义图片
    updateImgDialog(v) {
      this.customImgBaby.showHide = true;
      this.customBabyImg.id = v.id;
      this.customBabyImg.customImgUrl = v.customImg || ''
console.log(v);
    },
    beforeAvatarUpload(file) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error("只支持jpg、jpeg、png、gif格式的图片！");
        this.canUpload = false;
      } else {
        this.canUpload = true;
      }
    },

    upload1(file) {
      console.log(this.canUpload, "/canUpload");
      if (!this.canUpload) return;
      const formData = new FormData();
      if (this.type !== "file") {
        if (browserType("ie")) {
          formData.append("file", file.file);
        } else {
          formData.set("file", file.file);
        }
        uploadCustomImage(formData).then((res) => {
          this.$message.success("上传成功！");
          console.log(res.data,'');
          this.customBabyImg.customImgUrl = res.data;
        });
      }
    },
    deleteBabyDialog() {
      const _vue = this;
      if (_vue.multipleSelection.length < 1) {
        this.$message.error("请至少选择一条数据进行删除！");
        return;
      }
      const selections = _vue.multipleSelection;
      this.$confirm("确定删除选中的饰品么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var ids = [];
          for (var i = 0; i < selections.length; i++) {
            ids.push(selections[i].id);
          }
          deleteData({ ids: ids }).then((res) => {
            if (res.data.success) {
              this.$message.success("删除成功");
              this.loadData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    removeWarningStockItem(value) {
      const index = this.warningSettingModel.warningStockArray.findIndex(
        function (item) {
          return item.id === value;
        }
      );
      if (index !== -1) {
        this.warningSettingModel.warningStockArray.splice(index, 1);
      }
    },
    addWarningStockItem() {
      this.warningSettingModel.warningStockArray.push({
        id: '',
        num: '',
        minPrice: "",
        maxPrice: "",
      });
    },
    removeWarningPriceItem(value) {
      this.$log(value);
      var index = this.warningSettingModel.warningPriceArray.findIndex(
        function (item) {
          return item.id === value;
        }
      );
      if (index !== -1) {
        this.warningSettingModel.warningPriceArray.splice(index, 1);
      }
    },
    addWarningPriceItem() {
      this.warningSettingModel.warningPriceArray.push({
        id: undefined,
        minPrice: "",
        maxPrice: "",
        lowPercent: "",
        upPercent: "",
      });
    },
    successUpload(data) {
      this.customBabyInfo.iconUrl = data;
    },
  },
};
</script>
<style lang="scss">
.el-badge__content.is-fixed.is-dot {
    right: 12px;
    top: 5px;
}
  .el-badge__content.is-dot {
    width: 13px;
    height: 13px;
    right: 10px;
}
</style>
<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.app-container {
  padding: 30px;
  .tip{
      padding: 3px 11px;
      background: $mainColor;
      color: #fff;
      border-radius:50% ;
      cursor: pointer;
      &:hover {
        background: $hoverColor;
      }
  }
}
.addBaby-dialog {
  ::v-deep .el-dialog__body {
    width: 678px;
    text-align: center;
  }
  .search-add {
    margin: 0 auto;
    padding: 50px 0px;
    height: 400px;
  }
}
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }
  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }
  .babyquality {
    margin-right: 20px;
  }
  .babylook,
  .babycategory {
    margin-right: 20px;
  }
}
.top-btn {
  margin: 30px 20px 30px 0px;
  font-size: 14px;
  color: #ffffff;
}
.upload-btn {
  font-size: 14px;
  color: #ffffff;
}
.kSelect .el-select .el-input .el-input__inner {
  width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}
.top-radio-group {
  margin-bottom: 40px;
}

.customBaby-dialog {
  ::v-deep .el-dialog__body {
    padding: 10px 100px;
  }

  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}
::v-deep .el-dialog__body {
  padding: 10px 30px;
}
::v-deep .el-radio-button__inner {
  &:hover {
    color: $mainColor;
  }
}
.dialog-warningSetting {
  ::v-deep.el-input {
    width: 110px;
  }
  .price-input {
    width: 150px;
  }
  .el-icon {
    &-circle-plus,
    &-remove {
      font-size: 22px;
      color: #3b425d;
      margin-left: 10px;
    }
  }
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    margin: 0 0 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .warning-title {
      font-size: 16px;
      color: #14162e;
      &-right {
        font-size: 16px;
        color: #14162e;
        margin-left: 80px;
      }
      &-right2 {
        font-size: 16px;
        color: #14162e;
        margin-left: 20px;
      }
    }
    i {
      color: #d1d5dd;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.price-div {
  ::v-deep .el-input__inner {
    padding: 0 5px;
  }
}
.warning_div {
  padding: 100px;
  .customPriceText {
    text-align: center;
    .el-input {
      width: 80px;
      margin: 0 6px;
    }
  }
}
</style>
